<template>
  <div>
    <header class="section-header">
      <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple
  :limit="10"
  :on-exceed="handleExceed">
  <el-button size="small" type="primary" plain>导入</el-button>
</el-upload>
      <el-button type="danger" plain class="ml15">删除</el-button>
    </header>
    <div class="pictures-list">
      <PictureBox :hasCheckbox="true" v-for="(item, index) in pictures" :key="index" @replace="replace(pictureItem)"/>
      <PictureBoxEmpty v-for="(item, index) in pictures" :key="index" />
    </div>
  </div>
</template>

<script>
  import PictureBox from '../pictureBox'
  import PictureBoxEmpty from '../pictureBox/empty'
  export default {
    data() {
      return {
        pictures: Array(10),

        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    components: {
      PictureBox,
      PictureBoxEmpty,
    },
    props: {

    },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
    }
  }
</script>

<style scoped>
  .section-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dadada;
  }

  .pictures-list {
    display: flex;
    justify-content: space-around;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .ml15 {
    margin-left:15px;
  }
</style>
